<template>
	<view class="head flex-row">
		<view v-for="item in members" :key="item" class="item flex-column">
			<xbc-avatar :src="item.userAvatar" :radius="0" />
			<view class="name text-ellipsis">{{ item.userName }}</view>
		</view>
		<view @tap="toPage('member')" class="item flex-column">
			<view class="block flex-column">
				<text class="iconfont icon-more"></text>
			</view>
			<view class="name text-ellipsis">更多</view>
		</view>
		<view @tap="toAdd" class="item flex-column">
			<view class="block flex-column">
				<text class="iconfont icon-plus"></text>
			</view>
			<view class="name text-ellipsis">添加</view>
		</view>
	</view>
	<view class="row flex-row">
		<text class="label">群聊头像</text>
		<view class="flex-row">
			<xbc-avatar :src="group?.avatar" size="28px" group />
		</view>
	</view>
	<view class="row flex-row">
		<text class="label">群聊名称</text>
		<view class="input">{{ group?.name }}</view>
	</view>
	<view class="space"></view>
	<view @tap="sendMessage" v-if="conversation?.source == 'list'" class="btn flex-column">发送消息</view>
	<view @tap="clearMessage" class="btn flex-column">清空聊天记录</view>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import XBCIM from 'xbcim'

const group = ref({})
const members = ref([])
const eventChannel = ref(null)
const conversation = uni.getStorageSync('currentConversation')

function toPage(name: string) {
	uni.navigateTo({
		url: `/pages/contact/group/${name}`
	})
}

// 清空聊天记录
function clearMessage() {
	uni.showModal({
		title: '提示',
		content: '是否确认清空聊天记录',
		success(res){
			if(res.cancel) return
			const { conversationId, type } = conversation
			XBCIM.clearConversation({
				conversationId,
				conversationType: type
			}).then(() => {
				eventChannel.value.emit('clearMessage')
				uni.showToast({
					icon: 'none',
					title: '聊天记录删除成功'
				})
			}).catch(() => {
				uni.showToast({
					icon: 'none',
					title: '聊天记录删除失败'
				})
			})
		}
	})
}

// 添加
function toAdd() {
	uni.showToast({
		icon: 'none',
		title: '演示版本不支持新增'
	})
}

// 发送消息
function sendMessage() {
	if(!conversation.source || conversation.source != 'list') return
	const groupConversation = {
		...group.value,
		type: XBCIM.CONVERSATION_TYPE.GROUP,
		targetId: conversation.groupId
	}
	uni.setStorageSync('currentConversation', groupConversation)
	uni.redirectTo({
		url: `/pages/chat/group?id=${conversation.groupId}`
	})
}

// 获取群详情
async function getGroup() {
	group.value = await XBCIM.getGroupDetail({
		groupId: conversation?.groupId
	})
}

// 获取群成员
async function getMembers() {
	const res = await XBCIM.getGroupMemberList({
		groupId: conversation?.groupId,
		pageSize: 3
	})
	members.value = res?.list || []
}

onMounted(async () => {
	const instance = getCurrentInstance().proxy
	eventChannel.value = instance?.getOpenerEventChannel()
})

getGroup()
getMembers()
</script>

<style lang="scss" scoped>
.space {
	height: 20rpx;
	margin: 30rpx 0 100rpx;
	background-color: #f5f5f5;
}
.btn {
	color: red;
	height: 80rpx;
	margin: 40rpx;
	font-size: 32rpx;
}

.row {
	height: 92rpx;
	padding: 0 40rpx;
	
	.label {
		font-size: 30rpx;
	}
	
	.iconfont {
		color: #666;
		font-size: 36rpx;
	}
	
	.input {
		font-size: 28rpx;
		text-align: right;
	}
}

.head {
	padding: 20rpx 40rpx;
	margin-bottom: 20rpx;
	
	.name {
		font-size: 24rpx;
		margin-top: 4rpx;
	}
	
	.block {
		border: 2rpx solid #eee;
		@include fullsize(88rpx);
		
		.iconfont {
			color: #999;
		}
	}
}
</style>